import { SvgIcon } from '@/components/icon';
import { useState, useEffect } from 'react';

interface SearchProps {
  onClickText: (text: string) => void;
}

export default function FusionSearch({ onClickText }: SearchProps) {
  const [historyList, setHistoryList] = useState<string[]>([]);

  // 初始化读取本地历史记录
  useEffect(() => {
    const localHistory = localStorage.getItem('searchHistory');
    console.log(localHistory);

    setHistoryList(localHistory ? JSON.parse(localHistory) : []);
  }, []);
  return (
    <div className="flex flex-col px-2">
      <div className="mt-5">
        <div className="flex items-center justify-between">
          <h3 className="mb-2 text-sm text-[#1D2129]">搜索历史</h3>
          <SvgIcon
            icon="fusion-delete"
            size={20}
            onClick={() => {
              localStorage.removeItem('searchHistory');
              setHistoryList([]);
            }}
          />
        </div>
        {historyList.length > 0 && (
          <div className="flex flex-wrap ">
            {historyList.map((item, index) => (
              <div
                onClick={() => onClickText(item)}
                key={index}
                className="my-2 mr-4 rounded bg-[#f8f8f8] p-2 px-4 text-sm"
              >
                {item}
              </div>
            ))}
          </div>
        )}
      </div>
    </div>
  );
}
